<template>
    <div-row :obj="obj" class="MenuNav">
        <el-row class="nav_box">
            <el-col class="nav_item" :span="24/obj.col" v-for="(nav,index) in menuList" :key="index">
                <div class="item_box">
                    <div class="nav_icon"><i :class="nav.iconCode? nav.iconCode: 'fa fa-navicon '"/></div>
                    <div class="nav_name"><span>{{ nav.menuName }}</span></div>
                </div>
            </el-col>
        </el-row>
    </div-row>
</template>
<script>
import { startActProcess,queryMainframeMenuBySchemeId } from '@/api/api'
export default {
    title: 'GeziMenu',
    props: {
        obj: {
            type: Object
        }
    },
    data() {
        return {
            menuList: []
        }
    },
    created() {
        if (this.obj.value) {
            this._queryMainframeMenuBySchemeId()
        }
    },
	watch: {
		'obj.value': function (newQuestion, oldQuestion) {
			this._queryMainframeMenuBySchemeId()
		}
	 },
    methods: {
		_queryMainframeMenuBySchemeId() {
		    const params = {
		        'schemeId': this.obj.value
		    }
		    queryMainframeMenuBySchemeId(params)
		        .then((response) => {
		            this.menuList = response.data
		        })
		        .catch(function(error) {
		            console.log(error)
		        })
		}

    }
}
</script>
<style lang="scss" scoped>
    .MenuNav{
        .nav_box{
            text-align: center;
            font-size: 14px;
            .nav_item{
                height: 80px;
                margin-bottom: 20px;
            }
            .nav_icon{
                i{
                    display: block;
                    height: 40px;
                    font-size: 36px;
                    color:#666;
                }
            }
            .nav_name{
                margin-top: 15px;
                font-size: 16px;
            }
        }
    }
</style>
